<template>
    <div>
        <!-- 图片上传组件辅助-->
        <el-upload
            class="avatar-uploader"
            accept=""
            action=""
            multiple :limit="40"
            :http-request="uploadImg"
            :show-file-list="false">
            <i class="el-icon-plus avatar-uploader-icon" id="uploaderBtn" />
        </el-upload>
        <quill-editor
            class="info-editor"
            :disabled="disabled" :value="content"
            ref="QuillEditor"
            :options="editorOption"
            @change="onChange" @blur="onComplete">
        </quill-editor>
    </div>
</template>
<script>
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";

    // 工具栏配置
    const toolbarOptions = [
        ['bold', {'color': []}, {'align': []}],
        [{'list': 'ordered'}, {'list': 'bullet'}],
        ['code-block'],
        ['image']
    ];

    export default {
        name: "rich-txt",
        props: {
            disabled: {
                type: Boolean
            },
            content: {
                type: String,
            },
            change: {
                type:Function
            },
            complete: {
                type:Function
            },
        },
        components: {
            quillEditor
        },
        computed: {

        },
        data() {
            return {
                editorOption: {
                    placeholder: '请输入内容',
                    theme: 'snow', //主题风格
                    modules: {
                        toolbar: {
                            container: toolbarOptions, // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('#uploaderBtn').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }, // 富文本编辑器配置
                toUpload:{
                    ary:[],
                    processing:false, //是否上传中
                    current:0,
                }
            }
        },
        mounted(){

        },
        methods: {
            // 上传图片前
            beforeUpload(res, file) {
                const isImg = res.type === 'image/jpg' || res.type === 'image/png' || res.type === 'image/jpeg';
                const isLt1M = res.size / 1024 / 1024 < 2;
                if (!isImg) {
                    this.$message.error('支持JPG、PNG格式的图片，大小不得超过2M')
                }
                if (!isLt1M) {
                    this.$message.error('文件最大不得超过2M')
                }
                return isImg && isLt1M
            },
            // 上传图片失败
            uploadError(res, file) {
                this.$message.error('附件插入失败')
            },
            // 上传图片处理过程
            uploadImg(e) {
                this.toUpload.ary.push(e.file)
                if (!this.toUpload.processing) {
                    this.toUpload.current = 0
                    this._upload()
                }
            },
            _upload() {
                if (this.toUpload.current >= this.toUpload.ary.length) {
                    this.toUpload.current = 0
                    this.toUpload.ary = []
                    this.toUpload.processing = false
                    return
                }
                this.toUpload.processing = true

                let formData = new FormData()
                formData.append("file", this.toUpload.ary[this.toUpload.current]);
                this.request.upload({
                    url:"upload.file", data: formData
                }).then( res => {
                    let quill = this.$refs.QuillEditor.quill;
                    let length = quill.getSelection().index;
                    quill.insertEmbed(length, 'image', res.result.url);
                    quill.setSelection(length + 1)
                    this.toUpload.current ++
                    this._upload()
                }, res => {
                    this.$message.error("图片上传失败");
                })
            },

            onChange(e) {
                this.$emit("change", {html:e.html});
            },
            onComplete(e) {
                this.$emit("complete");
            }
        }
    }
</script>

<style scoped>
    .info-editor {
        height: 100%;
    }
    .ql-editor {
        /*height: calc(100% - 116px); min-height: calc(100% - 116px);*/
    }
    .ql-container.ql-snow {
        /*height: calc(100% - 116px); min-height: calc(100% - 116px);*/
    }
    .avatar-uploader{
        display: none;
    }
</style>
